<template>
  <div class="orrOutcupStatistics-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="550px"
    >
      <div style="padding-right: 50px; padding-top: 20px">
        <!-- 温馨提示 -->
        <div class="tips">
          温馨提示：在营业准备时，创建一个规则组，设置多个物料的出料规则，应用到不同机型的机台
        </div>

        <!-- 表单区域 -->
        <el-form
          ref="formRef"
          :model="modelValue.form"
          :rules="modelValue.rules"
          label-width="100px"
          label-position="left"
        >
          <!-- 规则编码 -->
          <el-form-item label="规则编码" prop="number">
            <el-input
              v-model="modelValue.form.number"
              placeholder="请输入规则编码"
              maxlength="64"
              show-word-limit
            />
          </el-form-item>

          <!-- 规则名称 -->
          <el-form-item label="规则名称" prop="name">
            <el-input
              v-model="modelValue.form.name"
              placeholder="请输入营业准备规则名称"
              maxlength="64"
              show-word-limit
            />
            <div class="example-text">
              例如：I机型营业准备规则(包含10种物料)
            </div>
          </el-form-item>

          <!-- 是否默认规则 -->
          <el-form-item label="是否默认规则" prop="isDefault">
            <el-radio-group v-model="modelValue.form.isDefault">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
            <div class="example-text">
              温馨提示：设置为默认规则后，若机台没有选择其他营业准备规则，则默认使用该规则
            </div>
          </el-form-item>

          <!-- 备注 -->
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="modelValue.form.remark"
              type="textarea"
              placeholder="请输入内容"
              maxlength="255"
              show-word-limit
              :rows="3"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addOrrOutcupStatistics,
  updateOrrOutcupStatistics,
} from '@/api/orr-outcup-statistics.api'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    storeName: form.storeName,
    storeNumber: form.storeNumber,
    orderSummary: form.orderSummary,
    quantity: form.quantity,
    successCount: form.successCount,
    abnormalCount: form.abnormalCount,
    businessDate: form.businessDate,
    cancelCount: form.cancelCount,
    failureCount: form.failureCount,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateOrrOutcupStatistics({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addOrrOutcupStatistics(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped></style>
